✨ Redesign the Effection home page (GC-framed arc + interactive tabs)#1207
Open
taras wants to merge 4 commits into
Open
✨ Redesign the Effection home page (GC-framed arc + interactive tabs)#1207taras wants to merge 4 commits into
taras wants to merge 4 commits into
Conversation
commit: |
taras
changed the title
Rebuild the Effection home page from the new mockup: a problem→proof→ solution narrative for library authors. Replaces the logo + feature-grid landing page with beats covering the await-boundary leak, the proven model, Effection's leak-proof rewrite, an interactive operation tree, three superpowers, the GC analogy, an async/await rosetta, and a closing CTA. Ported to the site's own framework (revolution SSR + Tailwind), with dark variants throughout and syntax highlighting reusing the site's Prism theme. New pieces: - components/code-window.tsx — macOS-window code block, highlighted via refractor (the tokenizer rehype-prism-plus already uses) so colours match the rest of the site and follow the OS light/dark preference. - components/operation-tree.tsx + assets/home-islands.js — static SVG driven by a small vanilla-JS island that animates the halt↓/teardown↑ cascade. - components/install-copy.tsx — copy-to-clipboard install pill (same island). Brand colours use arbitrary hex values because the custom Tailwind color tokens (blue-primary/blue-secondary/pink-secondary) are not emitted by the current v4 build.
Reworks the narrative from the mockup's v3 ("arc B"): lead with the
garbage-collection analogy instead of the leak bug, name structured
concurrency at the moment the reader already feels the gap, then prove it
with a new interactive "evidence" section.
Changes:
- New GC-first hero ("In JavaScript, you never free memory.") and a "The
exception" section; drop the old problem/badge hero, the await-boundary
table, the proven-model cards, and the leak-proof code block.
- New components/usecase-tabs.tsx — five real use cases (timeout, parallel,
stream, background, async teardown) as CSS-only tabs (radio/checkbox-hack,
no JS), each a code sample + one-line guarantee.
- Revised superpower/capstone/Effection copy per the v3 mockup; operation
tree, rosetta and CTA unchanged.
Updates the home page to the mockup's v4 pass:
- Two-line contrast hero ("JavaScript cleans up your memory. / It never
cleans up your async.") and a memory-vs-async framing.
- Sharper "The exception" section naming AbortSignal / close()/finally /
using as hand-rolled reconstructions of the missing lifetime, plus a
bridging paragraph after the async/await claim.
- Copy tweaks: evidence eyebrow "See for yourself", operation-tree heading
"Every operation belongs to the one that started it".
Keeps all three superpowers (halt, synchronous-by-default, context) rather
than collapsing synchronous-by-default into a footnote.
- Hero collapses to one balanced line (memory + async in the same sentence) instead of the two-tone split. - Restore the "same tree, twice" section framing and order the three superpowers halt → context → synchronous-by-default.
Contributor
|
This looks great. Just a little suggestion, can we replace the gradients with a single colour? They give of "vibe coded". |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
The old home page — logo, tagline, and a feature grid — doesn't make the case for Effection to the people most likely to adopt it: JS library authors. This rebuilds it from the mockup around a concrete narrative that reasons from an analogy every JS developer already trusts — garbage collection — and extends it to async.
The page:
AbortSignal, unsubscribe,close()/finally, andusingis you reconstructing the missing lifetime by hand.Approach
Built entirely on the site's own stack —
revolutionserver-rendered JSX + Tailwind v4 — reusing the shared header/footer. No client framework. Dark-mode variants throughout.Components:
components/usecase-tabs.tsx— the "see for yourself" tabs (timeout, parallel, stream, background, async teardown), each a code sample + one-line guarantee. CSS-only (radio/checkbox-hack) — pill + panel switching work with no JavaScript.components/code-window.tsx— a macOS-window code block, syntax-highlighted at render time withrefractor(the tokenizerrehype-prism-plusalready uses), so colours match the site and follow the OS light/dark preference.components/operation-tree.tsx+assets/home-islands.js— a static SVG driven by a small vanilla-JS island that animates the halt↓ / teardown↑ cascade on click.components/install-copy.tsx— a copy-to-clipboard install pill (same island).Note on colours: brand colours use arbitrary hex values (
text-[#14315D]etc.) because the custom Tailwind tokens (blue-primary/blue-secondary/pink-secondary) are not emitted by the current v4 build — the compiledtailwind/main.csscontains none of them (true onv4today too). Worth fixing globally in a follow-up.Rebased on
v4;deno fmt --check,deno lint, anddeno checkall pass. Verified end-to-end against a local dev server (light, dark, tab switching, halt animation, copy button).Screenshots
Hero — the memory-vs-async framing + "The exception"
See for yourself — interactive use-case tabs (shown with the "Stream" tab selected; switching is pure CSS)
Three superpowers — halt, context, synchronous-by-default
Dark mode
🤖 Generated with Claude Code